<template>
    <el-dialog id="company-basic-show"
               append-to-body
               top="5vh"
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
                <span class="font-s20 text-bold">
                    <icon name="company-basic"></icon>
                    企业基本信息 {{ companyBasic.id }}
                </span>
        </div>

        <!-- 操作按钮 -->
        <div class="text-center">
            <el-button-group>
                <el-button size="medium" @click="handleReload">
                    <icon name="refresh"></icon>
                    重新载入
                </el-button>
                <el-button size="medium" @click="dialogCompanyUserShow(companyBasic.uid)">
                    <icon name="user"></icon>
                    注册用户
                </el-button>
                <el-button size="medium">
                    <icon name="post"></icon>
                    招聘职位
                </el-button>
                <el-button size="medium" @click="dialogCompanyUserReceiveResumeSend(companyBasic.uid)">
                    <icon name="resume-send"></icon>
                    收到的简历
                </el-button>
                <el-button size="medium" @click="dialogCompanyUserInterview(companyBasic.uid)">
                    <icon name="interview"></icon>
                    发送的面试
                </el-button>
                <el-button size="medium">
                    <icon name="refresh"></icon>
                    刷新记录
                </el-button>
                <el-button size="medium">
                    <icon name="record"></icon>
                    登录记录
                </el-button>
            </el-button-group>
        </div>

        <!-- vip -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <strong class="detail-project__label">VIP</strong>
                    </div>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 会员 -->
                <el-descriptions-item label="会员："
                                      :content-style="{width: '230px'}">
                    <el-tag class="font-s14 is-round"
                            :type="companyBasic.user.vip.level === 0 ? 'info' : `v${companyBasic.user.vip.level}`">
                        <icon :name="companyBasic.user.vip.icon"></icon>
                        {{ companyBasic.user.vip.name }}
                    </el-tag>
                </el-descriptions-item>
                <!-- 到期时间 -->
                <el-descriptions-item label="到期时间：">
                    <div v-if="companyBasic.user.vip_time">
                        <el-tag v-show="!companyBasic.user.is_vip"
                                class="font-s14 is-round"
                                type="danger"
                                effect="dark">
                            <icon name="warning"></icon>
                            已到期
                        </el-tag>
                        <!-- 到期时间 -->
                        <el-tag class="ml-5 font-s14 is-round"
                                effect="dark"
                                :type="companyBasic.user.is_vip ? 'success' : 'danger'">
                            <icon name="time"></icon>
                            {{ companyBasic.user.vip_time }}
                        </el-tag>
                        <!-- 剩余 -->
                        <el-tag v-show="companyBasic.user.vip_expire_day > 0"
                                class="ml-5 font-s14 is-round"
                                effect="dark"
                                type="success">
                            剩余 <strong>{{ companyBasic.user.vip_expire_day }}</strong> 天
                        </el-tag>
                    </div>
                    <div v-else
                         class="text-info-light">
                        无
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <!-- logo -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <strong class="detail-project__label">企业 LOGO 和 附件</strong>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-popconfirm icon="el-icon-info"
                                   icon-color="red"
                                   title="确定删除企业 Logo 吗？"
                                   @confirm="handleDeleteLogo">
                        <el-button slot="reference"
                                   type="info"
                                   size="small"
                                   round
                                   :disabled="isEmpty(companyBasic.logo)">
                            <icon name="del"></icon>
                            删除 LOGO
                        </el-button>
                    </el-popconfirm>
                    <el-popconfirm icon="el-icon-info" icon-color="red" title="确定删除企业下载文件吗？">
                        <el-button slot="reference"
                                   class="ml-10"
                                   type="info"
                                   size="small"
                                   round
                                   :disabled="isEmpty(companyBasic.files)">
                            <icon name="del"></icon>
                            删除下载
                        </el-button>
                    </el-popconfirm>
                </div>
            </div>
            <div class="r-flex">
                <div style="width: 380px;">
                    <div class="uploader-image">
                        <div class="mb-10 text-center text-danger">
                            <icon name="warning"></icon>
                            支持JPG、PNG格式，文件小于2M
                            <el-button size="mini"
                                       class="ml-10"
                                       round
                                       :disabled="isEmpty(companyBasic.basic.logo_url)"
                                       v-clipboard:copy="companyBasic.basic.logo_url"
                                       v-clipboard:success="copySuccess"
                                       v-clipboard:error="copyError">
                                <icon name="copy"></icon>复制
                            </el-button>
                        </div>
                        <el-upload ref="upload"
                                   class="upload"
                                   action=""
                                   :accept="uploader.imageType"
                                   drag
                                   :show-file-list="false"
                                   :disabled="uploader.fileLoading"
                                   :http-request="choiceImage">
                            <div class="upload-image">
                                <el-image class="image-avatar image-avatar--circle image-avatar--128"
                                          ref="logo"
                                          fit="cover"
                                          :src="companyBasic.basic.logo_url">
                                    <div slot="error">
                                        <icon name="pic"></icon>
                                    </div>
                                </el-image>
                                <!-- 上传进度 -->
                                <div v-show="!uploader.fileLoading && uploader.progress > 0 && !uploader.finish"
                                     class="upload-image__progress">
                                    <el-progress :text-inside="true"
                                                 :stroke-width="16"
                                                 :percentage="uploader.progress"
                                                 status="success"></el-progress>
                                </div>
                            </div>
                        </el-upload>
                    </div>
                </div>
                <div class="ml-15 mr-15"></div>
                <div class="r-flex__item">
                    <div class="uploader-file">
                        <div class="mb-10 text-center text-danger">
                            <icon name="warning"></icon>
                            支持DOC、DOCX、XLS、XLSX，ZIP、RAR格式，文件小于5M
                            <el-button size="mini"
                                       class="ml-10"
                                       round
                                       :disabled="isEmpty(companyBasic.basic.file_url)"
                                       v-clipboard:copy="companyBasic.basic.file_url"
                                       v-clipboard:success="copySuccess"
                                       v-clipboard:error="copyError">
                                <icon name="copy"></icon>复制
                            </el-button>
                        </div>
                        <el-upload ref="upload"
                                   class="upload"
                                   action=""
                                   :accept="uploader.fileType"
                                   drag
                                   :show-file-list="false"
                                   :disabled="uploader.imageLoading"
                                   :http-request="choiceFile">
                            <div class="upload-image">
                                <el-image class="image-avatar image-avatar--128"
                                          fit="cover"
                                          src="">
                                    <div slot="error" class="upload-image__slot">
                                        <icon name="cloud-upload"></icon>
                                    </div>
                                </el-image>
                                <div v-show="!uploader.imageLoading && uploader.progress > 0 && !uploader.finish"
                                     class="upload-image__progress">
                                    <el-progress :text-inside="true"
                                                 :stroke-width="16"
                                                 :percentage="uploader.progress"
                                                 status="success"></el-progress>
                                </div>
                            </div>
                        </el-upload>
                    </div>
                </div>
            </div>
        </section>

        <!-- 基本信息 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <span class="detail-project__label">基本信息</span>
                    </div>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 公司名称 -->
                <el-descriptions-item label="公司名称：">
                    <el-input v-model="model.company_name"
                              size="medium"
                              placeholder="公司名称"></el-input>
                </el-descriptions-item>
                <!-- 品牌 -->
                <el-descriptions-item label="品牌：">
                    <el-input v-model="model.brands"
                              size="medium"
                              maxlength="4"
                              placeholder="品牌"></el-input>
                </el-descriptions-item>
                <!-- 公司性质 -->
                <el-descriptions-item label="公司性质：">
                    <el-select v-model="model.comkind" size="medium" placeholder="公司性质">
                        <el-option v-for="item in comkindOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 所属行业 -->
                <el-descriptions-item label="所属行业：">
                    <el-select v-model="model.industry" size="medium" placeholder="所属行业">
                        <el-option v-for="item in industryOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 成立日期 -->
                <el-descriptions-item label="成立日期：">
                    <el-date-picker v-model="model.established"
                                    type="date"
                                    size="medium"
                                    placeholder="成立日期"></el-date-picker>
                </el-descriptions-item>
                <!-- 员工数 -->
                <el-descriptions-item label="员工数：">
                    <el-select v-model="model.employee_num" size="medium" placeholder="员工数">
                        <el-option v-for="item in employeeNumOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 职位福利 -->
                <el-descriptions-item label="职位福利：" :span="2">
                    <el-select v-model="model.welfares"
                               multiple
                               filterable
                               allow-create
                               default-first-option
                               size="medium"
                               placeholder="福利标签">
                        <el-option v-for="item in welfareOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 公司介绍 -->
                <el-descriptions-item label="公司介绍：" :span="2">
                    <el-input v-model="model.profile" type="textarea" :rows="3" placeholder="自我介绍"></el-input>
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <!--联系方式-->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <span class="detail-project__label">联系方式</span>
                    </div>
                </div>
            </div>
            <!-- 独立 -->
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 联系人 -->
                <el-descriptions-item label="联系人：">
                    <el-input v-model="model.contacts"
                              size="medium"
                              maxlength="4"
                              placeholder="联系人"></el-input>
                </el-descriptions-item>
                <!-- 手机号码 -->
                <el-descriptions-item label="手机号码：">
                    <el-input v-model="model.mobile"
                              size="medium"
                              maxlength="4"
                              placeholder="手机号码"></el-input>
                </el-descriptions-item>
                <!-- 电话号码 -->
                <el-descriptions-item label="电话号码：">
                    <el-input v-model="model.phone"
                              size="medium"
                              placeholder="电话号码 如：0577-27813000"></el-input>
                </el-descriptions-item>
                <!-- 传真 -->
                <el-descriptions-item label="传真：">
                    <el-input v-model="model.fax"
                              size="medium"
                              placeholder="电话号码 如：0577-62732319"></el-input>
                </el-descriptions-item>
                <!-- 电子邮箱 -->
                <el-descriptions-item label="电子邮箱：">
                    <el-input v-model="model.email" size="medium" placeholder="电子邮箱"></el-input>
                </el-descriptions-item>
                <!-- QQ -->
                <el-descriptions-item label="QQ：">
                    <el-input v-model="model.qq" type="number" maxlength="12" size="medium"
                              placeholder="QQ 号码"></el-input>
                </el-descriptions-item>
                <!-- 公司网站 -->
                <el-descriptions-item label="公司网站：" :span="2">
                    <el-input v-model="model.website" size="medium" placeholder="公司网站 如：http://www.yqrc.com"></el-input>
                </el-descriptions-item>
                <!-- 所在地区 -->
                <el-descriptions-item label="所在地区：" :span="2">
                    <el-cascader :value="model.region"
                                 size="medium"
                                 :options="areaOptions"></el-cascader>
                </el-descriptions-item>
                <!-- 详细地址 -->
                <el-descriptions-item label="详细地址：" :span="2">
                    <el-input v-model="model.address" size="medium" placeholder="详细地址"></el-input>
                </el-descriptions-item>
                <!-- 乘车路线 -->
                <el-descriptions-item label="乘车路线：" :span="2">
                    <el-input v-model="model.lines" size="medium" placeholder="乘车路线"></el-input>
                </el-descriptions-item>
                <!-- 坐标 -->
                <el-descriptions-item label="坐标：" :span="2">
                    <div class="r-flex">
                        <div class="mr-10">
                            <el-button type="primary" size="small" plain round>
                                <icon name="nearby"></icon>
                                设置坐标
                            </el-button>
                        </div>
                        <div class="r-flex__item">
                            <strong>标注地址：</strong>
                            <span :class="{'text-info-light': !companyBasic.coordinate_address}">
                                {{ companyBasic.coordinate_address || '未设置' }}
                            </span>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <!-- 其它 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <span class="detail-project__label">其它</span>
                    </div>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 微招聘点赞 -->
                <el-descriptions-item label="名企：" :content-style="{width: '320px'}">
                    <el-select v-model="model.famous" size="medium" placeholder="员工数">
                        <el-option label="否" :value="0"></el-option>
                        <el-option label="是" :value="1"></el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 企业认证 -->
                <el-descriptions-item label="企业认证：">
                    <el-tag class="is-round font-s14"
                            :type="companyBasic.cert_status === 0 ? 'info' : 'success'"
                            :effect="companyBasic.cert_status === 0 ? 'light' : 'dark'"
                            :disable-transitions="true">
                        {{ companyBasic.cert_status === 0 ? '未认证' : '已认证' }}
                    </el-tag>
                </el-descriptions-item>
                <!-- 浏览量 -->
                <el-descriptions-item label="浏览量：">
                    {{ companyBasic.pageviews || 0 }}
                </el-descriptions-item>
                <!-- 微招聘点赞 -->
                <el-descriptions-item label="微招聘点赞：">
                    {{ companyBasic.micro_like || 0 }}
                </el-descriptions-item>
                <!-- 创建时间 -->
                <el-descriptions-item label="创建时间：">
                    {{ companyBasic.created_at || '无' }}
                </el-descriptions-item>
                <!-- 更新时间 -->
                <el-descriptions-item label="更新时间：">
                    {{ companyBasic.updated_at || '无' }}
                </el-descriptions-item>
                <!-- 登录 IP -->
                <el-descriptions-item label="登录 IP：">
                    {{ companyBasic.user.last_login_ip || '无' }}
                </el-descriptions-item>
                <!-- 登录时间 -->
                <el-descriptions-item label="登录时间：">
                    {{ companyBasic.user.last_login_time || '无' }}
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <div class="mt-20 text-right">
            <el-button type="text" size="medium" @click="close">取消</el-button>
            <el-button type="primary"
                       size="medium"
                       native-type="submit"
                       :loading="saveLoading"
                       @click="submitForm">
                <icon name="save"></icon>
                保存
            </el-button>
        </div>

        <!-- dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </el-dialog>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { Prop, Emit } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

import OptionsMixin from '@/mixins/options'
import FunctionMixin from '@/mixins/function'
import UploaderMixin from '@/mixins/uploader'
import CompanyMixin from '@/mixins/company'

import { toJson, loading, errorMessage, successMessage } from '@/utils'

const module = namespace('cms/companyBasic')

import CompanyUserShow from '@/views/cms/company/company-user/Show.vue'
import CompanyUserReceiveResumeSend from '@/views/cms/personal/resume-send/CompanyUserReceiveResumeSend.vue'
import CompanyUserInterview from '@/views/cms/company/interview/CompanyUserInterview.vue'

@Component({
  components: {
    CompanyUserShow,
    CompanyUserReceiveResumeSend,
    CompanyUserInterview
  }
})
export default class Show extends mixins(OptionsMixin, FunctionMixin, UploaderMixin, CompanyMixin) {
  @Prop({type: Object, default: {width: '1000px', visible: false}}) dialog!: any

  // Vuex
  @module.State companyBasic!: any
  @module.Action show!: (payLoad: any) => Promise<any>
  @module.Action update!: (payLoad: any) => Promise<any>
  @module.Action updateLogo!: (payLoad: any) => Promise<any>
  @module.Action deleteLogo!: (payLoad: any) => Promise<any>
  @module.Action updateFile!: (payLoad: any) => Promise<any>
  @module.Action deleteFile!: (payLoad: any) => Promise<any>

  // form 模型
  public model: any = {}

  // 保存加载
  private saveLoading: boolean = false
  private showViewer: boolean = false

  /*----- 钩子 -----*/
  created() {
    this.model = toJson(this.companyBasic.basic)
  }

  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    const _loading = loading({target: '#company-basic-show > .el-dialog', background: 'rgba(0, 0, 0, .7)'})
    this.show({id: this.companyBasic.id}).then((res) => {

      this.model = toJson(this.companyBasic.basic) // 重新赋给模型

      _loading.close()
      res.status === 200 ? successMessage('重新载入成功！') : errorMessage(res.message)
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 选择图片
   *
   * @param {Object} params
   * @return {void}
   */
  private choiceImage(params: any): void {
    const appendData = {
      upload_dir: 'company_logo',
      added_name: this.companyBasic.uid,
      width: 300
    }

    this.uploader.imageLoading = true

    this.uploadImage('admin_avatar', params, appendData).then((res) => {
      if (res.status === 200) {

        const param = {
          id: this.companyBasic.id,
          index: this.dialog.index,
          params: {
            file_path: res.data.file_path
          }
        }

        // 更新 logo
        this.updateLogo(param).then((res) => {
          res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
        })
      } else {
        errorMessage(res.message)
      }

      this.uploader.imageLoading = false
    }).catch((err) => {
      this.uploader.imageLoading = false
    })
  }

  /**
   * 处理删除 logo
   */
  private handleDeleteLogo(): void {
    const param = {
      id: this.companyBasic.id,
      index: this.dialog.index,
    }
    this.deleteLogo(param).then((res) => {
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
    })
  }

  /**
   * 选择图片
   *
   * @param {Object} params
   * @return {void}
   */
  private choiceFile(params: any): void {
    const appendData = {
      upload_dir: 'company_file',
      added_name: this.companyBasic.uid
    }

    this.uploader.fileLoading = true

    this.uploadFile(params, appendData).then((res) => {
      console.log(res)
      if (res.status === 200) {

        const param = {
          id: this.companyBasic.id,
          index: this.dialog.index,
          params: {
            file_path: res.data.file_path
          }
        }

        // 更新 file
        this.updateFile(param).then((res) => {
          res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
        })
      } else {
        errorMessage(res.message)
      }

      this.uploader.fileLoading = false
    }).catch((err) => {
      this.uploader.fileLoading = false
    })
  }

  /**
   * 提交表单
   */
  private submitForm(): void | boolean {
    this.saveLoading = true
    this.update({id: this.companyBasic.id, index: this.dialog.index, params: this.model}).then((res: any) => {
      this.saveLoading = false
      if (res.status !== 200) {
        errorMessage(res.message)
        return false
      }

      this.model = toJson(res.data.show) // 重新赋给 model
      successMessage(res.message)
      this.close()
    }).catch((err: any) => {
      this.saveLoading = false
    })
  }

  @Emit()
  close(): void {
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/view/edit';
@import '~@/styles/view/image';
@import '~@/styles/view/uploader';
</style>